<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>学生注册</title>
		<script src="jquery/jquery-1.11.3.min.js"></script>
		<script src="js/gtl/snow.js"></script>
		<link rel="stylesheet" href="css/gtl/spop.min.css" />
		<link rel="stylesheet" href="layui/css/layuiG.css" media="all">
		<script src="js/gtl/spop.min.js"></script>
		
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
			}
			
			body {
				background-repeat: no-repeat;
				background-position: center center #2D0F0F;
				background-color: #00BDDC;
				background-image: url(img/gtl/snow.jpg);
				background-size: 100% 100%;
			}
			
			.snow-container {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				z-index: 100001;
			}
			
			.container {
				margin: 25px 0px 0px 25%;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="snow-container"></div>

		<div class="container">
			<form class="layui-form" action="" onsubmit="return false">
				<!--用户名-->
				<div class="layui-form-item">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" maxlength="15" autocomplete="off" class="layui-input">
					</div>
					<span id="usernameSpan"></span>
				</div>
				<!--密码-->
				<div class="layui-form-item">
					<label class="layui-form-label">密码:</label>
					<div class="layui-input-inline">
						<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
					<span id="passwordSpan"></span>
				</div>
				<!--确认密码-->
				<div class="layui-form-item">
					<label class="layui-form-label">确认密码:</label>
					<div class="layui-input-inline">
						<input type="password" name="re_password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
					<span id="re_passwordSpan"></span>
				</div>
				<!--姓名-->
				<div class="layui-form-item">
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline">
						<input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" maxlength="20">
					</div>
					<span id="nameSpan"></span>
				</div>

				<!--年龄-->
				<div class="layui-form-item">
					<label class="layui-form-label">年龄:</label>
					<div class="layui-input-inline">
						<input type="number" name="age" lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input" maxlength="3">
					</div>
					<span id="ageSpan"></span>
				</div>

				<!--性别-->
				<div class="layui-form-item">
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-block">
						<input type="radio" name="gender" value="1" title="男" checked>
						<input type="radio" name="gender" value="0" title="女">
					</div>
				</div>
				<div class="layui-form-item">

					<div class="layui-inline">
						<label class="layui-form-label">出生日期:</label>
						<div class="layui-input-inline">
							<input type="text" name="userDate" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
						</div>
					</div>
					<span id="userDateSpan"></span>
				</div>

				<!--选择年级 和班级-->
				<div class="layui-form-item">
					<label class="layui-form-label">选择年级:</label>
					<div class="layui-input-inline">
						<select name="userGrade" id="userGrade" lay-verify="required"></select>
					</div>
					<label class="layui-form-label">选择班级:</label>
					<div class="layui-input-inline">
						<select name="userClasses" id="userClasses" lay-verify="required"></select>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-upload">
						<label class="layui-form-label"></label>
						<div class="layui-input-inline">
							<button type="button" class="layui-btn" id="test1">上传头像</button>
							<div class="layui-upload-list">
								<img class="layui-upload-img" id="demo1" width="100px" height="100px">
								<p id="demoText"></p>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">手机验证:</label>
						<div class="layui-input-inline">
							<input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" maxlength="18">
						</div>
					</div>
					<button type="button" class="layui-btn layui-btn-warm" onclick="registerMessage()">发送验证码</button>
					<span id="phoneSpan"></span>
				</div>

				<!--验证码-->
				<div class="layui-form-item">
					<label class="layui-form-label">验证码:</label>
					<div class="layui-input-inline">
						<input type="text" name="ver-code" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" onclick="register()">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-danger">重置</button>
						<a type="button" class="layui-btn layui-btn-normal" href="student_login.html">返回</a>
						</button>
					</div>
				</div>

			</form>
		</div>

	</body>
	<script src="js/gtl/register.js"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use(['form', 'laydate', 'upload', 'element'], function() {
			var form = layui.form,
				upload = layui.upload //只有执行了这一步，部分表单元素才会自动修饰成功
				,
				element = layui.element,
				laydate = layui.laydate;

			//……

			//如果你的 HTML 是动态生成的，自动渲染就会失效
			//因此你需要在相应的地方，执行下述方法来进行渲染
			//			form.render();
			//日期
			laydate.render({
				elem: '#date'
			});

			//页面加载渲染年级下拉列表
			$(function() {
				//获取年级的select
				let userGrade = $("#userGrade");
				//获取班级的select
				let userClasses = $("#userClasses");

				//发送ajax请求获取年级
				$.ajax({
					type: "get",
					url: "http://localhost:8081/grade/getGradeAll",
					dataType: "json",
					success: function(data) {
						let gradeList = data.data;
						let optionHtml = "<option value='0'>请选择</option>";
						for(let i in gradeList) {
							let value1 = gradeList[i].gradeId;
							let value2 = gradeList[i].gradeName;
							optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
						}
						userGrade.append(optionHtml)
						form.render("select");
					}
				});
				
				//发送ajax请求获取班级
				$.ajax({
					type: "get",
					url: "http://localhost:8081/classes/getClassAll",
					dataType: "json",
					success: function(data) {
						let classList = data.data;
						let optionHtml = "<option value='0'>请选择</option>";
						for(let i in classList) {
							let value1 = classList[i].classesId;
							let value2 = classList[i].classesName;
							optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
						}
						userClasses.append(optionHtml)
						form.render("select");
					}
				});

			
			});

			//常规使用 - 普通图片上传
			let uploadInst = upload.render({
				elem: '#test1',
				url: 'http://localhost:8081/user/imgUpload' //改成您自己的上传接口
					,
				accept: 'file' //普通文件
					,
				before: function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});

					element.progress('demo', '0%'); //进度条复位
					layer.msg('上传中', {
						icon: 16,
						time: 0
					});
				},
				done: function(res) {
					//如果上传失败
					if(res.code > 0) {
						return layer.msg('上传失败');
					}
					//上传成功的一些操作
					//……
					$('#demoText').html(''); //置空上传失败的状态
				},
				error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
					//进度条
					,
				progress: function(n, index, e) {
					element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
					if(n == 100) {
						layer.msg('上传完毕', {
							icon: 1
						});
					}
				}
			});
		});
	</script>

</html>